@mixin transition($value){
  -webkit-transition:$value;
  -moz-transition:$value;
  transition:$value;
}
@mixin animation($value){
  -webkit-animation:$value;
  -moz-animation:$value;
  animation:$value;
}
@mixin gradient($value){
  background: linear-gradient($value);
  background: -moz-linear-gradient($value);
  background: -webkit-linear-gradient($value);

}
@mixin boxwidth($width,$height) {
  width:$width;
  height:$height;
}
@mixin borderColor($color) {
  border:1px solid $color;
}
@mixin boxShadow($normal){
  box-shadow: $normal;
  -webkit-box-shadow: $normal;
  -moz-box-shadow: $normal;
}
@mixin translateset($normal){
  -webkit-transform: $normal;
  -moz-transform: $normal;
  transform: $normal;
}
@mixin u_radius($normal) {
  -moz-border-radius: $normal;
  -webkit-border-radius: $normal;
  border-radius: $normal;
}
@mixin u_radius_top_left($normal){
  -moz-border-top-left-radius: $normal;
  -webkit-border-top-left-radius: $normal;
  border-border-top-left-radius: $normal;
}
@mixin u_radius_top_right($normal){
  -moz-border-top-right-radius: $normal;
  -webkit-border-top-right-radius: $normal;
  border-border-top-right-radius: $normal;
}
@mixin draw_triangle_left($normal,$color){
  width: 0;
  height: 0;
  border-top: $normal solid transparent;
  border-right: $normal*2 solid $color;
  border-bottom: $normal solid transparent;
}
@mixin u_radius_bottom_left($normal) {
  -moz-border-bottom-left-radius: $normal;
  -webkit-border-bottom-left-radius: $normal;
  border-border-bottom-left-radius: $normal;
}
@mixin u_radius_bottom_right($normal){
  -moz-border-bottom-right-radius: $normal;
  -webkit-border-bottom-right-radius: $normal;
  border-border-bottom-right-radius: $normal;
}
@mixin boxsizing($contain){
  -moz-box-sizing: $contain;
  -webkit-box-sizing: $contain;
  box-sizing: $contain;
}
$xsmall-break:768px;
@mixin xsmall(){
  @media screen and (max-width: $xsmall-break) {
    @content;
  }
}
@mixin minxsmall(){
  @media screen and (min-width: 320px) and (max-width: $xsmall-break) {
    @content;
  }
}
@mixin minsmall414(){
  @media screen and (max-width: 414px) {
    @content;
  }
}
@mixin small(){
  @media screen and (min-width: $xsmall-break) {
    @content;
  }
}
@mixin smallh800(){
  @media screen and (max-height: 800px) {
    @content;
  }
}
@mixin ptmixin($px){
  padding-top: $px;
}
@mixin pbmixin($px){
  padding-bottom: $px;
}
@mixin plmixin($px){
  padding-left: $px;
}
@mixin prmixin($px){
  padding-right: $px;
}
@mixin mtmixin($px){
  margin-top: $px;
}
@mixin mbmixin($px){
  margin-bottom: $px;
}
@mixin mlmixin($px){
  margin-left: $px;
}
@mixin mrmixin($px){
  margin-right: $px;
}
@mixin fnmixin($px){
  font-size: $px;
}
//运算
@function u($px){
  @return $px/$mainSize/2*1rem;
}
$mainSize:20px;
$white:#fff;
$imgsrc:'/static/images/web/';
